<template>
  <div class="nginx-proxy">
    <div class="title">
      <h3>Cxx0822</h3>
    </div>

    <div class="app-center">
      <el-card class="app-card" style="background-color: #11616B;"
               @click="blogClick">
        <i class="fa-solid fa-book-open"></i>
        <div>
          <span>博客网站</span>
        </div>
      </el-card>

      <el-card class="app-card" style="background-color: #08979D;"
               @click="blogAdminClick">
        <i class="fa-solid fa-gear"></i>
        <div>
          <span>博客Admin</span>
        </div>
      </el-card>

      <el-card class="app-card" style="background-color: #c93c05;"
               @click="sweetHutClick">
        <i class="fa-solid fa-house"></i>
        <div>
          <span>Sweet Hut</span>
        </div>
      </el-card>

      <el-card class="app-card" style="background-color: #0ba140;"
               @click="foodHubClick">
        <i class="fa-solid fa-bowl-food"></i>
        <div>
          <span>食光集</span>
        </div>
      </el-card>

      <el-card class="app-card" style="background-color: #c10fc7;"
               @click="giteaClick">
        <i class="fa-brands fa-git-alt"></i>
        <div>
          <span>Gitea</span>
        </div>
      </el-card>

      <el-card class="app-card" style="background-color: #926851;"
               @click="resumeClick">
        <i class="fa-solid fa-newspaper"></i>
        <div>
          <span>个人简历</span>
        </div>
      </el-card>

    </div>

    <div class="footer-content">
      <p>© Cxx0822 | V1.0.0
        <el-button v-if="isMobile()"
                   :icon="Refresh" type="primary"
                   circle size="small" @click="refreshClick"
        />
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { isMobile } from "./utils"
import { Refresh } from '@element-plus/icons-vue'
import { ElMessage } from "element-plus"

const blogClick = () => {
  if (isMobile()) {
    ElMessage.info('暂不支持移动端访问')
    return
  }

  window.open(`${window.location.origin}/blog/`, '_blank');
}

const sweetHutClick = () => {
  if (!isMobile()) {
    ElMessage.info('暂不支持PC端访问')
    return
  }

  window.open(`${window.location.origin}/sweet-hut/`, '_blank');
}

const foodHubClick = () => {
  if (!isMobile()) {
    ElMessage.info('暂不支持PC端访问')
    return
  }

  window.open(`${window.location.origin}/food-hub/`, '_blank');
}

const blogAdminClick = () => {
  if (isMobile()) {
    ElMessage.info('暂不支持移动端访问')
    return
  }

  window.open(`${window.location.origin}/blog-admin/`, '_blank');
}

const giteaClick = () => {
  window.open(`${window.location.origin}/gitea/`, '_blank');
}

const resumeClick = () => {
  ElMessage.info('敬请期待')
}

const refreshClick = () => {
  location.reload()
}
</script>

<style lang="scss">
.nginx-proxy {
  height: 100%;
  padding: 10px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;

  .title {
    text-align: center;

    h3 {
      font-size: 2rem;
      font-weight: bold;
    }
  }

  .app-center {
    margin-top: 100px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;

    .app-card {
      max-width: 250px;
      color: white;
      font-size: 1.3rem;

      .el-card__body {
        display: grid;
        grid-template-columns: 25px 1fr;
        align-items: center;
        gap: 10px;
      }
    }

    .app-card:hover {
      cursor: pointer;
    }
  }

  @media (max-width: 768px) {
    .app-center {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .footer-content {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

    color: #2B2B2C;
    font-size: large;
    font-family: "Times New Roman", "Palatino Linotype", serif;
    padding: 10px;
    text-align: center;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  }
}
</style>
